import React from "react";
import {
  Card,
  Form,
  Input,
  Button,
  Select,
  DatePicker,
  InputNumber,
  Radio,
  Space,
} from "antd";
import "./index.less";

const { Option } = Select;
const { TextArea } = Input;

const BasicForm: React.FC = () => {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log("表单值:", values);
  };

  return (
    <div className="pro-basic-form" data-oid="kyyicll">
      <Card title="基础表单" className="pro-card" data-oid="ak9sqi8">
        <Form
          form={form}
          layout="vertical"
          onFinish={onFinish}
          initialValues={{
            type: "private",
            status: "active",
          }}
          data-oid="6h0th:6"
        >
          <Form.Item
            label="标题"
            name="title"
            rules={[{ required: true, message: "请输入标题" }]}
            data-oid="c2gjj_f"
          >
            <Input placeholder="请输入标题" data-oid="9:vu4:v" />
          </Form.Item>

          <Form.Item
            label="类型"
            name="type"
            rules={[{ required: true, message: "请选择类型" }]}
            data-oid="gpb5n21"
          >
            <Select data-oid="9_cbem_">
              <Option value="public" data-oid="lv2swn7">
                公开
              </Option>
              <Option value="private" data-oid="4c4x2xe">
                私密
              </Option>
            </Select>
          </Form.Item>

          <Form.Item
            label="开始日期"
            name="startDate"
            rules={[{ required: true, message: "请选择开始日期" }]}
            data-oid="-rt:ede"
          >
            <DatePicker style={{ width: "100%" }} data-oid="zcmkido" />
          </Form.Item>

          <Form.Item
            label="目标"
            name="goal"
            rules={[{ required: true, message: "请输入目标" }]}
            data-oid="iadj4cz"
          >
            <InputNumber
              style={{ width: "100%" }}
              min={0}
              max={100}
              placeholder="请输入目标"
              data-oid="hdah:jh"
            />
          </Form.Item>

          <Form.Item
            label="标准"
            name="standard"
            rules={[{ required: true, message: "请输入标准" }]}
            data-oid=":mbszk-"
          >
            <TextArea rows={4} placeholder="请输入标准" data-oid="rgj779p" />
          </Form.Item>

          <Form.Item
            label="客户"
            name="client"
            rules={[{ required: true, message: "请选择客户" }]}
            data-oid="9z0:-s9"
          >
            <Select data-oid="iks9-3w">
              <Option value="client1" data-oid="8cmlcjl">
                客户1
              </Option>
              <Option value="client2" data-oid="yce0.xb">
                客户2
              </Option>
              <Option value="client3" data-oid=".:y5jnl">
                客户3
              </Option>
            </Select>
          </Form.Item>

          <Form.Item
            label="邀请人"
            name="invites"
            rules={[{ required: true, message: "请选择邀请人" }]}
            data-oid=".xw5gi0"
          >
            <Select
              mode="multiple"
              placeholder="请选择邀请人"
              data-oid="owo8rl_"
            >
              <Option value="user1" data-oid="y1hvaek">
                张三
              </Option>
              <Option value="user2" data-oid="4_5i8tp">
                李四
              </Option>
              <Option value="user3" data-oid="w4miqxg">
                王五
              </Option>
            </Select>
          </Form.Item>

          <Form.Item
            label="权重"
            name="weight"
            rules={[{ required: true, message: "请输入权重" }]}
            data-oid="1njs31a"
          >
            <InputNumber
              style={{ width: "100%" }}
              min={0}
              max={100}
              placeholder="请输入权重"
              data-oid="v9eqnbc"
            />
          </Form.Item>

          <Form.Item
            label="状态"
            name="status"
            rules={[{ required: true, message: "请选择状态" }]}
            data-oid="l3stu7:"
          >
            <Radio.Group data-oid="dag1gen">
              <Radio value="active" data-oid="qq.u291">
                启用
              </Radio>
              <Radio value="inactive" data-oid="3gy:n6n">
                停用
              </Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item data-oid="7ihuefq">
            <Space data-oid="s-.6li.">
              <Button type="primary" htmlType="submit" data-oid="_e_35sb">
                提交
              </Button>
              <Button onClick={() => form.resetFields()} data-oid="ceq04ej">
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default BasicForm;
